<script setup>
import { defineAsyncComponent } from 'vue';
import { useTabs } from '@/util/tabs.js';

const { tabs, compoMap, activeKey } = useTabs([
  { title: '账号登录', compo: defineAsyncComponent(() => import('./acct.vue')) },
  // { title: '短信登录', compo: defineAsyncComponent(() => import('./tel.vue')) },
]);
</script>

<template>
  <div class="sign-in">
    <div class="form-container">
      <a-tabs v-model:active-key="activeKey">
        <template v-for="o in tabs" :key="o.title">
          <a-tab-pane :tab="o.title"></a-tab-pane>
        </template>
      </a-tabs>

      <component :is="compoMap[activeKey]"></component>
    </div>
  </div>
</template>

<style>
.sign-in {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: rgb(242,243,245);
}

.sign-in > .form-container {
  width: 480px;
  padding: 30px 44px 70px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 14px 2px rgba(219,219,219,.5);
}

.sign-in .ant-tabs-nav { margin-bottom: 32px; }
.sign-in .ant-tabs-tab { font-size: 20px; }
.sign-in .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: unset;
}

.sign-in > .form-container .ant-form-item-control-input-content > * {
  padding-left: 24px;
  padding-right: 24px;
  height: 60px;
  border-radius: 10px;
}

.sign-in > .form-container button[type="submit"] {
  height: 60px;
  margin-top: 70px;
}

.sign-in .ant-form-item {
  margin-bottom: 28px;
}

.sign-in .ant-form-item-with-help .ant-form-item-explain {
  position: absolute;
  bottom: -24px;
}
</style>
